<template>
  <div class="order-detail">
    <div class="group-box location-box c-333 fz-14">
      <van-icon name="location-o" class="mr-10" />
      <div>
        <div>
          <span class="mr-5">{{ state.orderData.receiverName }}</span
          >{{ state.orderData.receiverPhone }}
        </div>
        <div class="mt-5">{{ state.orderData.receiverAddress }}</div>
      </div>
    </div>

    <div class="group-box cake-box">
      <div class="title">
        <span class="van-ellipsis w-240">{{ state.orderData.storeName }}</span>
        <span class="status">{{ state.orderData.statusInfo }}</span>
      </div>

      <template v-if="state.orderData.meituanGoodsItems">
        <div
          class="cake-info"
          v-for="(item, index) in state.orderData.meituanGoodsItems"
          :key="index"
        >
          <van-image class="img" :src="item.mainPic" alt="" />

          <div class="cake-info-content">
            <div class="row mb-10">
              <span class="name van-ellipsis">{{ item.goodsName }}</span>
              <span class="num">x {{ item.num || 0 }}</span>
            </div>

            <div class="row">
              <span class="remark">{{ item.description }}</span>
              <!-- <span class="price">¥ {{ item.priceYuan }}</span> -->
            </div>
          </div>
        </div>
      </template>

      <!-- <div class="discount-info fz-12">
        <span class="c-999">优惠券</span>
        <span class="c-red">- ¥5.00</span>
      </div> -->

      <div class="summary-info">
        <span class="c-999">下单时间: {{ state.orderData.createTime }}</span>
        <span class="c-333"
        >共{{ state.orderData.totalNum }}件商品
          <!-- 实付: <span class="fz-16 fw-bold">¥ {{ state.orderData.totalPriceYuan }}</span> -->
        </span>
      </div>
    </div>

    <div class="group-box order-box">
      <van-cell-group>
        <van-cell title="配送方式" value="免运费 同城配送" />
        <van-cell title="配送时间" :value="state.orderData.deliveryTime" />
      </van-cell-group>
    </div>

    <div class="group-box">
      <van-cell title="买家留言" :value="state.orderData.consumerRemark" />
    </div>

    <div class="group-box contact-box">
      <span @click="onContact"><van-icon name="service-o" class="mr-5" />在线客服</span>
      <!-- <span class="line" /> -->
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, computed } from "vue";
import { getOrderById } from "@/api/common";
import { useRoute } from "vue-router";
import { statusColorMap } from "@/const";
import store from "@/store";
import { onContact } from '@/utils'

export default defineComponent({
  setup() {
    const route = useRoute();
    const orderId = route.query.id;
    const appConfig = computed(() => store.getters.appConfig)
    const state = reactive({
      orderData: {
        meituanGoods: {},
      },
    });

    const onContactCall = () => {
      window.location.href = `tel://${appConfig.value.phone}`;
    };
    const getStatusStyle = () => {
      let color = statusColorMap[props.orderData.status] || "#000";
      return {
        color,
      };
    };

    const getOrder = () => {
      const params = {
        orderId,
      };
      getOrderById(params).then((res) => {
        state.orderData = res.data || {};
        state.orderData.totalPriceYuan = (
          state.orderData.totalPrice / 100
        ).toFixed(2);
        if (
          state.orderData.meituanGoodsItems &&
          state.orderData.meituanGoodsItems.length
        ) {
          state.orderData.meituanGoodsItems.forEach((item) => {
            item.priceYuan = (item.goodsPrice / 100).toFixed(2);
          });
        }
      });
    };
    getOrder();
    return {
      state,
      onContact,
      onContactCall,
      getStatusStyle,
    };
  },
});
</script>

<style lang="less" scoped>
.order-detail {
  min-height: 100vh;
  background: #f6f8f7;
  padding: 10px;
  .location-box {
    padding: 10px;
    display: flex;
    align-items: center;
  }
  .cake-box {
    padding: 10px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .status {
        font-size: 12px;
      }
    }
    .cake-info {
      display: flex;
      padding: 12px 0;
      margin: 12px 0;
      border-top: 1px solid #f9f8f8;
      border-bottom: 1px solid #f9f8f8;
      .img {
        width: 70px;
        height: 70px;
        margin-right: 8px;
      }
      &-content {
        flex: 1;
        min-height: 80px;
        .row {
          display: flex;
          justify-content: space-between;
        }
        .remark {
          font-size: 12px;
          display: inline-block;
          width: 180px;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .price {
          font-size: 14px;
        }
        .name {
          display: inline-block;
          width: 180px;
          font-size: 14px;
        }
        .num {
          color: #756e6e;
          font-size: 14px;
        }
      }
    }
    .discount-info {
      display: flex;
      justify-content: space-between;
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px solid #f9f8f8;
    }
    .summary-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      text-align: right;
    }
  }
  .order-box {
  }
  .contact-box {
    background: #fff;
    color: #1C75BC;
    line-height: 48px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    span {
      text-align: center;
      display: inline-block;
      flex: 1;
    }
    .line {
      background: #efefef;
      display: inline-block;
      width: 2px;
      height: 20px;
    }
  }
}
.group-box {
  background: #fff;
  border-radius: 6px;
  margin-bottom: 10px;
  .van-cell {
    background: transparent;
  }
}
</style>
